<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #panel {
        position: relative;
        width: 100px;
        height: 100px;
        background: blue;
        cursor: pointer;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div id="panel">sss</div>

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script>
      $(function () {
        $("#panel").click(function () {
          //判断当前是否正处于动画状态
          if (!$("#panel").is(":animated")) {
            //未有动画
            //自定义动画
            //$(this).animate({left: '200px'}, 3000);

            //累加或累减动画
            //$(this).animate({left: '+=10px'}, 1000)

            //多重动画
            //$(this).animate({left: '500px', height: '200px'}, 3000);

            //$(this).animate({left: '500px'}, 3000)
            //$(this).animate({height: '200px'}, 3000);
            //以上代码等价于：链式写法
            //$(this).animate({left: '500px'}, 3000).animate({height: '200px'}, 3000);

            //链式写法
            $(this)
              .animate({ left: "400px", height: "300px", opacity: "1" }, 3000)
              .animate({ top: "400px", width: "300px" }, 3000, function () {
                //当动画执行完成后，做其他的事情
                $(this).css("border", "5px solid blue");
              });
          }
        });
      });
    </script>
  </body>
</html>
